<template>
	<view class="quotation">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#fff" size="26"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">行情</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right">
				</view>
			</view>
		</u-navbar>
		
		<view class="headBox">
			<view class="content" @tap="show = true">
				<text>{{setDate(listQuery.date)}}</text>
				<u-icon name="arrow-down" color="#9a9a9a" size="36upx"></u-icon>
			</view>
			<view class="filterCriteria">
				<view class="typeBox">
					<view class="title allType">价格</view>
				</view>
				<view class="typeBox">
					<view class="title">涨跌</view>
				</view>
			</view>
		</view>
		
		<view class="main">
			<scroll-view class="listview"
				enableBackToTop="true" scroll-y @scrolltolower="scrolltolower()">
				<view class="goodsList" v-for="(item,i) in quotationList" :key="i">
					<view class="goods">
						<image :src="item.fileUrl" mode="scaleToFill"></image>
						<view class="cont">
							<view class="name">{{item.castName}}</view>
							<text>麒麟之州-系列</text>
						</view>
					</view>
					<view :class="['datas',setColor(item.fluctuationFloat)]">
						<view class="price">￥{{item.openPrice}}</view>
						<view class="numB">{{item.fluctuationFloat>0?"+":""}}{{item.fluctuationFloat}}%</view>
					</view>
				</view>
			 
				<view class="noListBox" v-if="quotationList.length == 0">
					<view class="noData">
						<image class="noDataImg" src="../../static/noData.png" mode="widthFix"></image>
					</view>
				</view>
			</scroll-view>
			<view class="msg" v-if="isEnd">— 更多内容敬请期待 —</view>
		</view>
		
		<u-datetime-picker ref="datetimePicker"
			:show="show" :formatter="formatter"
			v-model="listQuery.date" @confirm="confirmDate"
			mode="date" @cancel="show = false"
		></u-datetime-picker>
		
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {getquotationList} from '../../api/home.js'
	export default {
		data() {
			return {
				show: false,
				isEnd:false,
				quotationList:[],
				listQuery: {
					page: 1,
					pageSize: 10,
					pages:1,
					total:0,
					date:"",
				},
			}
		},
		onLoad() {
			this.listQuery.date = Number(new Date());
			this.listQuery.date = this.setDate(this.listQuery.date,1);
			this.getData();
		},
		onPullDownRefresh() {
			this.listQuery.page = 1;
			this.getData();
		},
		methods:{
			setColor(data){
				let clas = "";
				if(data || data == 0){
					if(data > 0){
						clas = "upGoods3";
					}else if(data < 0){
						clas = "upGoods1";
					}else if(data == 0){
						clas = "upGoods2";
					}
				}
				return clas;
			},
			scrolltolower(){//触底
				if(this.listQuery.pages > this.listQuery.page){
					this.listQuery.page++;
					this.getData();
				}else{
					this.isEnd = true;
				}
			},
			getData(){
				this.$nextTick(()=>{
					this.$refs.min_loading.open('加载中，请稍后！');
				});
				getquotationList(this.listQuery).then(res => {
					if (res.data.success) {
						let list = res.data.obj.list;
						this.listQuery.pages = res.data.obj.pages;
						if (list.length == 0 || list.length == 1) {
							this.isEnd = true;
						}
						
						let newList = list.map((item, index) => {
							if(item.fileUrl){
								item.fileUrl = (this.pathImg + item.fileUrl);
							}
							return item;
						});
						
						if (this.listQuery.page == 1) {
							this.quotationList = [...newList];
						} else {
							this.quotationList = [...this.quotationList,...newList];
						}
					}else{
						uni.stopPullDownRefresh();
					}
					this.isEnd = true;
				}).catch(err=>{
					this.isEnd = true;
					uni.stopPullDownRefresh();
				}).finally(() => {
					uni.stopPullDownRefresh();
					this.$refs.min_loading.close();
				});
			},
			setDate(n,i){//设置时间
				let timer="";
				let date = new Date(n);
				let y = date.getFullYear();
				let m = date.getMonth()+1;
				let d = "";
				if(i == 1){
					d = date.getDate()-1;
				}else{
					d = date.getDate();
				}
				let h = date.getHours();
				let mm = date.getMinutes();
				timer = add0(y)+'-'+add0(m)+'-'+add0(d);
				function add0(m){
					return m<10?'0'+m:m 
				}
				return timer;
			},
			confirmDate(val){//确认选择时间
				this.show = false;
				this.listQuery.date = this.setDate(val.value);
				this.getData();
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			back(){
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {  
				    uni.navigateBack({  
				      delta: 1  
				    });  
				} else {  
				    history.back();  
				}
			},
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
	}
</script>

<style lang="scss" scoped>
	page{height: 100%;width: 100%;}
	.quotation{
		min-height: 100%;
		background-color: #fff;
		width: 100%;
		height: 100%;
		.main{
			width: 100%;
			height: calc(100% - 220upx);
			padding: 0 30upx;
			.listview{
				width: 100%;
				height: 100%;
				padding-top: 40upx;
				.goodsList{
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #F7F7F7;
					padding-bottom: 28upx;
					margin-bottom: 30upx;
					.datas{
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #33D29C;
						font-size: 30upx;
						.price{
							padding-right: 40upx;
							min-width: 230upx;
							text-align: right;
						}
						.numB{
							min-width: 114upx;
							text-align: right;
						}
					}
					.upGoods1{
						color:#33D29C;
					}
					.upGoods2{
						color:#666;
					}
					.upGoods3{
						color:#EB5703;
					}
					.goods{
						flex: 1%;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						.cont{
							flex: 1%;
							min-height: 120upx;
							padding-left: 8upx;
							font-size: 24upx;
							display: flex;
							flex-wrap: wrap;
							align-content: space-between;
							.name{
								color: #111;
								vertical-align: top;
								text-align: justify;
							}
							text{
								color: #666;
								vertical-align: bottom;
							}
						}
						image{
							width: 120upx;
							height: 120upx;
						}
					}
				}
				.goodsList:last-child{
					border: 0 none;
					padding-bottom: 0;
					margin-bottom: 0;
				}
				.noListBox {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					.noData {
						width: 220upx;
						height: 180upx;
						margin: 0 auto;
						.noDataImg {
							width: 220upx;
							height: 180upx;
						}
					}
				}
			}
			.msg {
				width: 100%;
				text-align: center;
				color: rgba(255, 255, 255, .5);
				font-size: 24upx;
				z-index: 2;
			}
		}
		.headBox{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30upx;
			padding-top: 150upx;
			// height: 40upx;
			.filterCriteria{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.typeBox{
					.title{
						margin-right: 10upx;
						width: 114upx;
						display: flex;
						align-items: center;
						justify-content: flex-end;
						color: #3a4559;
						font-size: 24upx;
					}
					.allType{
						margin-right: 50upx;
					}
				}
			}
			.content{
				flex: 1%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				background-color: #fff;
				font-size: 26upx;
				>text{
					margin-right: 10upx;
					
				}
			}
		}
		.logoBox{
			width: 100%;
			height: 100%;
			.navBox{
				height: 120upx;
				background-image: url("@/static/common/bg1.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}
	}
</style>
